<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>违章查询</title>
    <style>
        #header {
            float: right;
            margin-right: 150px;
        }
        #result td {
            text-align: center;
        }
        #data {
            border-collapse: collapse;
        }
        #data th {
            border-bottom: 1px solid black;
        }
        #data td {
            border-bottom: 1px dashed black;
            height: 30px;
        }
        #data tr:last-Child > td {
            border: none;
        }
    </style>
</head>
<body>
    <div id="header">
        <a href="/export/">导出违章记录报表</a>
    </div>
    <div id="result">
        <input v-model.trim="keyword" type="text" size="30" placeholder="请输入车牌号或车主姓名" @keydown.enter="search()">
        <button @click="search()">查询</button>
        <hr>
        <div v-if="records.length > 0">
            <table id="data">
                <tr>
                    <th width="100">车牌号</th>
                    <th width="100">车主姓名</th>
                    <th width="150">违章原因</th>
                    <th width="180">违章时间</th>
                    <th width="180">处罚方式</th>
                    <th width="100">是否受理</th>
                    <th width="120">操作</th>
                </tr>
                <tr v-for="record in records">
                    <td>{{ record.car.carno }}</td>
                    <td>{{ record.car.owner }}</td>
                    <td>{{ record.reason }}</td>
                    <td>{{ record.makedate }}</td>
                    <td>{{ record.punish }}</td>
                    <td>{{ record.dealt | boolean2Text }}</td>
                    <td>
                        <a href="" @click.prevent="handleRecord(record)">受理</a>
                        <a href="" @click.prevent="deleteRecord(record)">删除</a>
                    </td>
                </tr>
            </table>
            <div class="buttons">
                <button :disabled="prevPage == null" @click="back()">上一页</button>&nbsp;&nbsp;
                第{{ currentPage }}页&nbsp;&nbsp;
                <button :disabled="nextPage == null" @click="forward()">下一页</button>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script>
        let app = new Vue({
            el: '#result',
            data: {
                records: [],
                currentPage: 1,
                prevPage: null,
                nextPage: null,
                keyword: ''
            },
            methods: {
                loadData(url) {
                    fetch(url)
                        .then(resp => resp.json())
                        .then(json => {
                            this.records = json.results
                            this.prevPage = json.previous
                            this.nextPage = json.next
                        })
                },
                search() {
                    this.currentPage = 1
                    let url = '/records/?page=' + this.currentPage
                    if (this.keyword.length > 0) {
                        url += '&keyword=' + this.keyword
                    }
                    this.loadData(url)
                },
                back() {
                    this.currentPage -= 1
                    this.loadData(this.prevPage)
                },
                forward() {
                    this.currentPage += 1
                    this.loadData(this.nextPage)
                },
                handleRecord(record) {
                    if (!record.dealt) {
                        fetch('/handle/?rno=' + record.no)
                            .then(resp => resp.json())
                            .then(json => {
                                if (json.code === 10000) {
                                    record.dealt = true
                                } else {
                                    alert(json.message)
                                }
                            })
                    }
                },
                deleteRecord(record) {
                    if (record.dealt) {
                        if (confirm('是否删除该条记录?')) {
                            fetch('/delete/?rno=' + record.no)
                                .then(resp => resp.json())
                                .then(json => {
                                    if (json.code === 20000) {
                                        let index = this.records.indexOf(record)
                                        if (index >= 0) {
                                            this.records.splice(index, 1)
                                        }
                                    } else {
                                        alert(json.message)
                                    }
                                })
                        }
                    } else {
                        alert('不能删除未受理的记录')
                    }
                }
            },
            filters: {
                boolean2Text(value) {
                    return value? '已受理': '未受理'
                }
            }
        })
    </script>
</body>
</html>